<template>
  <div>
  	<myheader></myheader>

		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul>
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<div class="carousel-item active">
					<!-- 轮播图 -->
          <Carousel pageTheme='circle' :datas='imgs' @click="clickimg" @change="changeimg"></Carousel>
				</div>
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品列表</h3>
				<div class="row">
					<div v-for="item in goods_list" class="col-sm-6 col-md-3 col-product">
						<figure>
							<!-- <video id='video' width="240" height="240" :src="'http://localhost:8000/static/upload/'+item.img"  controls='contros' autoplay='autoplay' muted loop='loop'></video> -->
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" 	width="240" height="240">
							
							<figcaption>
								
								<div class="thumb-overlay"><a :href="'http://localhost:8080/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
								<Button color='blue' @click="into" class="video_button">画中画模式</Button>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item/?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}.00</span></p>
					</div>
				</div>
				<!-- 分页 -->
				<div class="page_button">
					<Pagination  v-model="pagination" @change="currentChange" layout="pager" small></Pagination>
				</div>
				<div class="row">
					<div v-for="item in goods_list_self" class="col-sm-6 col-md-3 col-product">
						<figure>
							<!-- <video id='video' width="240" height="240" :src="'http://localhost:8000/static/upload/'+item.img"  controls='contros' autoplay='autoplay' muted loop='loop'></video> -->
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" 	width="240" height="240">
							
							<figcaption>
								
								<div class="thumb-overlay"><a :href="'http://localhost:8080/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
								<Button color='blue' @click="into" class="video_button">画中画模式</Button>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item/?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}.00</span></p>
					</div>
				</div>
				<!-- 分页 -->
				<div class="page_button_self">
					<Button @click="orderby('price')">按价格排序</Button>
					<Button @click="orderby('create_time')">按日期排序</Button>
					<Button @click="sort('')">↑</Button> / <Button @click="sort('-')">↓</Button>

					<Button  @click="get_goods_self(1)">首页</Button>
					<Button v-show="lastpage" @click="get_goods_self(lastpage)">上一页</Button>
					<span>
						<!-- <button class="page_button_self" v-for="index in allpage" @click="get_goods_self(index)">{{index}}</button> -->
					</span>

					<button class="page_button_self" v-for="index in last_page" @click="get_goods_self(index)">{{index}}</button>
					<button class="page_button_self" @click="get_goods_self(page)">{{page}}</button>
					<button class="page_button_self" v-for="index in next_page" @click="get_goods_self(index)">{{index}}</button>

					<Button v-show="nextpage" @click="get_goods_self(nextpage)">下一页</Button>
					
					<Button  @click="get_goods_self(allpage)">尾页</Button>
					<input class="page_input" v-model="page_search" @change="search_page" type="text">
					<input class="page_input" @input="jump_page($event)" type="text">
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

import axios from 'axios'
import myheader from './myheader.vue'
export default {
  data () {
    return {
    msg: "这是一个变量",
    //轮播图片
	imgs:[],
	//商品列表
	goods_list:[],
	pagination:{
		page:1,
		size:4,
		total:0
	},
	//分页偏移
	last_page:[],
	next_page:[],
	// 查找分页
	page_search:'',
	
	goods_list_self:[],
	self_total:0,
	lastpage:0,
	nextpage:0,
	page:1,
	allpage:0,
	size:1,
	pagelist:[],
	//排序变量
	column:'',
	order:'',
    }
  },
    // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
  mounted:function(){
	//   this.change_back()
	this.get_goods_self(this.page)
	this.get_goods()
	  this.get_carousel()
	},
  methods:{
	jump_page(e){
		var val = e.target.value
		console.log(val)
		if(val >0 && val<=this.allpage){
			this.get_goods_self(val)
		}else{
			this.$Message('超出范围')
		}

	},
	//排序操作
	orderby(column){
		this.column=column
		this.get_goods_self(this.page)
	},
	sort(order){
		this.order = order
		this.get_goods_self(this.page)
	},
	//跳转页数
	search_page(){
		if(this.page_search>0 && this.page_search<=this.allpage){
			this.get_goods_self(this.page_search)
		}else{
			this.$Message('超出范围')
		}
	},
	  //切换页数
	currentChange(value) {
	  console.log(value.cur, value.size);
	  	this.pagination.page=value.cur
		this.get_goods()
    },
	//画中画
    into:function(){
        var video =document.getElementById('video')
        if (video !== document.pictureInPictureElement) {
          // 尝试进入画中画模式
          video.requestPictureInPicture();    
          this.mymsg = '退出画中画';  
          } else {
          // 退出画中画
          document.exitPictureInPicture();
          this.mymsg = '进入画中画';
        }
    },
	//获取商品
	get_goods(){
		this.axios.get('http://127.0.0.1:8000/myapp/goodslist/',{
			params:{page:this.pagination.page,size:this.pagination.size}
		}).then(res=>{
			this.goods_list=res.data.data
			this.pagelist = res.data.page_list
			this.pagination.total = res.data.total
		})
	},
	//获取商品
	get_goods_self(page){
		this.page=page
		this.axios.get('http://127.0.0.1:8000/myapp/goodslist/',{
			params:{page:page,size:this.size,column:this.column,order:this.order}
		}).then(res=>{
			console.log(res.data)
			this.goods_list_self=res.data.data
			this.self_total = res.data.total

			//判断上一页
			if(page==1){
				this.lastpage = 0;
			}else{
				this.lastpage = page-1
			}
			//计算总页数
			this.allpage = Math.ceil(this.self_total / this.size)
			//判断下一页
			if(page == this.allpage){
				this.nextpage = 0
			}else{
				this.nextpage = page +1
			}

			//设置偏移量
			var move_page = 2
			var my_last=[]
			// 计算左侧偏移量
			for(let i=page-move_page;i<page;i++){
				if(i>0){
					my_last.push(i)
				}
			}
			// 计算右侧偏移量
			var my_next=[]
			for(let i=page+1;i<=page+move_page;i++){
				if(i<=this.allpage){
					my_next.push(i)
				}
			}
			this.last_page=my_last
			this.next_page = my_next
		})
	},
	//切换主题颜色
	change_back(){
		//获取样式表
		var styles = getComputedStyle(document.documentElement)
		// 动态更改
		document.documentElement.style.setProperty('--bg-color','#292a2d')
		document.documentElement.style.setProperty('--a-color','white')
		document.documentElement.style.setProperty('--text-color','#d3d3d3')
	},
	//获取轮播图接口
	get_carousel(){
		this.axios.get(' http://127.0.0.1:8000/myapp/getcarousel/').then(res=>{
			var mylist=[]
			// 遍历数组
			for(let i=0;i<res.data.length;i++){
				mylist.push({title:res.data[i].name,
							link:res.data[i].src,
							image:res.data[i].img,
							})
				
			}
			this.imgs=mylist
		})
	},
    //点击轮播图
    clickimg(indexx,data){
        // alert(data.link)
        window.location.href=data.link
    },
    //切换轮播图
    changeimg(index,data){

    }
     
  }
}


</script>
 
<style>
.video_button{
	margin-top: 190px;
	width: 95px;
	height: 30px;
	font-size: 2px;
}
.page_button{
    left: 50%;
    top: 50%;
    margin-left:45%;/*对应中间盒子宽度的一半*/
    margin-top:7%;/*对应中间盒子高度的一半*/

}
.page_button_self{
	margin-left: 10px;	
}
.page_input{
	width: 50px;
	height: 50px;
}
</style>